<template>
	<view class="content">
		<NavBar :title="title" :autoBack="false" id="nav">
			<template #left>
				<view class="navbar-left center" @click="goBack">
					<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
				</view>
			</template>
		</NavBar>
		<view class="main">
			<view class="widths pad20 flex searchtimebox">
				<view class="flex time">
					<view class="bold tag">{{playSet.year}}</view>
					年
					<view class="bold tag">{{playSet.month}}</view>
					月
					<view class="bold tag">{{playSet.day}}</view>
					日
				</view>
				<view class="flex btnbox">
					<view class="mr-20  speedbox" @click="openShowSpeed">
						{{videoInfo.speed}}x
						<u-icon name="arrow-down" size="24" class="ml-8"></u-icon>
					</view>
					<view class="fullbtn" @click="toFullScreen">
						<u-image width="32rpx" height="32rpx" mode="aspectFit" src="../../static/img04.png"></u-image>
					</view>
				</view>
			</view>
			<view class="videobox" :class="videoInfo.isfull?'videofull':''">
				<view class="time" :class="videoInfo.isfull?'timefull':''" >{{ currentTime }}</view>
				<!-- <video ref="videoPlayer" crossorigin="*" id="videobox" :class="videoInfo.isfull?'full':''" :src="videoUrl" @loadedmetadata="onVideoLoaded" :autoplay="false" :controls="false" muted @click.stop="showStatus"
					@waiting="videoload"
					@loadeddata="showLoading"
					:enable-progress-gesture="false"
				></video> -->
				<view class="video-player">
				    <view ref="videoPlayers" class="video-js vjs-default-skin myvideojs"></view>
				</view>
				<view class="btnbox" :class="videoInfo.isfull?'btnfull':''">
					<view class="center statusbox">
						<view class="play" v-if="videoInfo.ispaused" @click="toPlay">
							<u-icon name="play-circle" size="64" color="#fff"></u-icon>
						</view>
						<view class="paused" :class="hideBtn?'hidebtn':''" v-else @click="toPause">
							<u-icon name="pause-circle" size="64" color="#fff"></u-icon>
						</view>
						<view class="loading" :class="videoInfo.showLoading">
							<u-loading mode="flower" color="#fff" size="64"></u-loading>
						</view>
					</view>
					<view class="sound"  :class="hideBtn?'hidebtn':''" @click="changeMuted">
						<u-icon v-if="videoInfo.ismuted" name="volume-off-fill" color="#fff" size="36"></u-icon>
						<u-icon v-else name="volume-up-fill" color="#fff" size="36"></u-icon>
					</view>
					<view class="screenhot" :class="hideBtn?'hidebtn':''" >
						<u-icon name="moments" color="#fff" class="screenhot" size="36" @click="screenshot"></u-icon>
					</view>
					<view class="timeline">
						<!-- <u-line-progress active-color="#2979ff" height="4" :show-percent="false" :percent="videoInfo.curPercent"></u-line-progress> -->
						<u-slider v-model="videoInfo.curPercent" :use-slot="true" min="0" max="100"
						@start="sliderStart"
						@end="sliderEnd"
						>
							<view class="">
								<view class="badge-button">
								</view>
							</view>
						</u-slider>
					</view>
				</view>
			</view>
			
			<view class="exitfull"  @click="exitFullScreen">
				<u-image width="32rpx" height="32rpx" mode="aspectFit" src="../../static/img07.png"></u-image>
			</view>
				
			<view class="actionbox">
				<view class="flex widths box">
					<view class="dirCloumn item" @click="openShowStartTime">
						<view class="center picbox">
							<u-image width="44rpx" height="44rpx" mode="aspectFit" src="../../static/img01.png"></u-image>
						</view>
						<view class="f28 txt">搜索</view>
					</view>
					<view class="dirCloumn item" @click="toPics">
						<view class="center picbox">
							<u-image width="44rpx" height="44rpx" mode="aspectFit" src="../../static/img02.png"></u-image>
						</view>
						<view class="f28 txt">畫面快照</view>
					</view>
					<view class="dirCloumn item" @click="toBackTime">
						<view class="center picbox">
							<u-image width="44rpx" height="44rpx" mode="aspectFit" src="../../static/img03.png"></u-image>
						</view>
						<view class="f28 txt">回退</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<u-picker mode="time" v-model="showTime" 
		:default-time="timePickerDefault" 
		:params="params"
		confirm-text="確認"
		cancel-text="取消"
		title="開始時間"
		@confirm="confirmDate"
		></u-picker>
		<u-picker mode="time" v-model="showEndTime"
		:default-time="timePickerEndDefault" 
		:params="params"
		confirm-text="確認"
		cancel-text="取消"
		title="结束時間"
		@confirm="confirmEndDate"
		></u-picker>
		<u-picker mode="selector" v-model="showSpeedList"
		:default-selector="[speedDefaultIndex]" 
		:range="speedList"
		confirm-text="確認"
		cancel-text="取消"
		@confirm="confirmSpeed"
		></u-picker>
		<Tabar></Tabar>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import Tabar from "@/component/HomeTab"
	import NavBar from "@/component/NavBar"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	import { baseUrl,videoImgBaseUrl,videoPlaybackBaseUrl } from "@/api/url.js"
	import { getVideoUrl,getCaseUserlist,getCaseUserIdent,updateAuth,saveVideoPic,getVideoAuths } from "@/api/apis.js"
	import synewjessibuca from "@/uni_modules/sy-new-jessibuca/components/sy-new-jessibuca/sy-new-jessibuca.vue"
	import videojs from 'video.js'
	var passwordRegex = /^[a-zA-Z0-9_]{6,16}$/;
	export default {
		components:{
			Tabar,
			NavBar,
			ZPaging,
			synewjessibuca
		},
		data() {
			return {
				videoImgBaseUrl: videoImgBaseUrl,
				title:"回放",
				list:[],
				templist:[],
				curid:0,
				playInfo:{
					fmp4:"",
				},
				videoUrl: 'http://211.22.123.64/index/api/downloadFile?file_path=/opt/media/bin/www/record/live/202405111715395451/2024-05-17/12-56-44-9.mp4',
				playSet:{
					speed:1,
					year:0,
					month:0,
					day:0,
					startInfo:{
						hour:0,
						minute:0,
						second:0,
						timestamp:0,
					},
					endInfo:{
						hour:0,
						minute:0,
						second:0,
						timestamp:0,
					}
				},
				videoInfo:{
					durationTime:0,
					speed:1,
					ispaused:true,
					isfull:false,
					curTime:0,
					curPercent:0,
					ismuted:true,
					showLoading:false,
				},
				videoObj:null,
				videoHeight:0,
				currentTime:"",
				isaction:false,
				caseid:0,
				did:0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true,
				},
				showTime:false,
				showEndTime:false,
				curtimestamp:0,
				timePickerDefault:'',
				timePickerEndDefault:'',
				showSpeedList:false,
				speedList:[1,1.5,2,2.5],
				speedDefaultIndex:0,
				startTitle:"",
				startTime:0,
				endTime:0,
				app:"",
				stream:"",
				filePath:"",
				timeLen:0,
				isPlay:false,
				hideBtn:false,
				action: baseUrl + '/api/apict/uploadfile',
				authen: baseUrl + '/api/apict/getVideoAuths',
				player:null,
				options:{},
				videoDom:null,
			}
		},
		created() {
		  
		},
		onShow(){
			this.setTabList(uni.getStorageSync("bindevice"))
			const { startTime,endTime,filePath,timeLen,app,stream,caseid,did } = this.$Route.query
			if(caseid){
				this.caseid = caseid
				this.did = did
				uni.setStorageSync("caseid",caseid)
				uni.setStorageSync("did",did)
			}else{
				if(uni.getStorageSync('caseid')){
					this.caseid = uni.getStorageSync('caseid')
					this.did = uni.getStorageSync("did")
				}else{
					this.$Toast("數據錯誤")
					setTimeout(()=>{
						uni.navigateBack(-1)
					},1200)
				}
			}
			if(startTime && endTime && filePath && timeLen){
				this.startTime = startTime
				this.endTime = endTime
				this.filePath = filePath
				this.timeLen = timeLen
				this.app = app
				this.stream = stream
				uni.setStorageSync("startTime",startTime)
				uni.setStorageSync("endTime",endTime)
				uni.setStorageSync("filePath",filePath)
				uni.setStorageSync("timeLen",timeLen)
				uni.setStorageSync("app",app)
				uni.setStorageSync("stream",stream)
				this.init()
			}else{
				if(uni.getStorageSync("startTime") && uni.getStorageSync("endTime") && uni.getStorageSync("filePath") && uni.getStorageSync("timeLen")){
					this.startTime = uni.getStorageSync("startTime")
					this.endTime = uni.getStorageSync("endTime")
					this.filePath = uni.getStorageSync("filePath")
					this.timeLen = uni.getStorageSync("timeLen")
					this.app = uni.getStorageSync("app")
					this.stream = uni.getStorageSync("stream")
					this.init()
				}else{
					this.goBack()
				}
			}
			this.$nextTick(()=>{
				
				if(uni.getStorageSync("islogin")){
					this.ident=parseInt(uni.getStorageSync("ident")) 
					if(uni.getStorageSync('name')){
						this.changeUserName(uni.getStorageSync('name'))
					}
				}
			})
		},
		onLoad() {

		},
		mounted() {
			this.$nextTick(() => {
				this.initVideo()
				// this.videoObj = this.$refs.videoPlayer;
				// this.setBtnBoxHeight();
			    // this.init();
			});
		},
		computed: {
			...mapState(["userinfo"]),
		},
		methods: {
			...mapMutations(['chageUserPageType','chageUserPageId','changeUserIdent','changeUserName','setTabList']),
			initVideo(){
				var video = document.createElement('video')
				video.id = 'video'  
				video.style = 'width: 100%;' // 不设置高度，让视频自动撑开
				video.setAttribute("class", "video-js vjs-default-skin vjs-big-play-centered");
				video.controls = true  
				this.$refs.videoPlayers.$el.appendChild(video) 
				let option ={
					controls: true,
					muted: false, // 静音切换
					autoplay: false,
					fluid: true, //宽高自适应
					preload: "auto",
					loop: true,//循坏播放
					sources: [
						{
							type: "video/mp4", // mp4格式
							src: this.videoUrl,
							crossOrigin: '*',
							withCredentials: true,
						},
					],
					 controlBar: {
						 //控制条组件
						children: [
							{
								name: 'playToggle',
							}, // 播放按钮
							{
								name: 'volumePanel', // 音量控制
								inline: false, // 不使用水平方式
							},
							{
								name: 'currentTimeDisplay',
							}, // 当前已播放时间
							{
								name: 'timeDivider',
							}, // 时间分割线
							{
								name: 'durationDisplay',
							}, // 总时间
							{
								name: 'progressControl',
							}, // 播放进度条
							
						]
					},
				};
				let _this = this
				// 创建videojs实例
				this.videoDom =videojs(video,option ,function onPlayerReady() {
					this.hls.xhr.beforeRequest = function(options) {
					    options.headers = options.headers || {};
					    // 添加自定义请求头
					    options.headers['secret'] = '09de486b83f32969148049c1382616c2';
					    return options;
					};
					this.on("loadstart",function(){
						console.log("开始请求数据 ");
					})
					this.on("progress",function(){
						console.log("正在请求数据 ");
					})
					this.on("loadedmetadata",function(){
						console.log("获取资源长度完成 ")
					})
					this.on("canplaythrough",function(){
						console.log("视频源数据加载完成")
					})
					this.on("waiting", function(){
						console.log("等待数据")
					});
					this.on("play", function(){
						console.log("视频开始播放")
					});
					this.on("playing", function(){
						console.log("视频播放中")
					});
					this.on("pause", function(){
						console.log("视频暂停播放")
					});
					this.on("ended", function(){
						console.log("视频播放结束");
					});
					this.on("error", function(){
						console.log("加载错误")
					});
					this.on("seeking",function(){
						console.log("视频跳转中");
					})
					this.on("seeked",function(){
						console.log("视频跳转结束");
					})
					this.on("ratechange", function(){
						console.log("播放速率改变")
					});
					this.on("timeupdate",function(){
						console.log("播放时长改变");
					})
					this.on("volumechange",function(){
						console.log("音量改变");
					})
					this.on("stalled",function(){
						console.log("网速异常");
					})      
				});
			},
			init(){
				this.playInfo.fmp4 = videoPlaybackBaseUrl+'/index/api/downloadFile?file_path='+this.filePath
				// this.videoUrl = this.playInfo.fmp4
				// this.playInfo.fmp4 = "../../static/11.mp4"
				// this.getVideoAuth()
				this.setShowTime()
				this.setShowEndTime()
			},
			getVideoAuth(){
				
				let data = {
					uid:uni.getStorageSync('uid'),
					video:this.playInfo.fmp4
				}
				const _this = this
				  const formData = new FormData();
				  formData.append('uid', uni.getStorageSync('uid'))
				  formData.append('video', this.playInfo.fmp4)
				
				  const xhr = new XMLHttpRequest();
				  xhr.open('POST', this.authen, true);
				  xhr.setRequestHeader('token', uni.getStorageSync('userToken'));
				  xhr.onload = function() {
					  // console.log(xhr.responseText)
				    // if (xhr.status === 200) {
				      const response = JSON.parse(xhr.responseText)
					  console.log(response)
				      if (response.code === 1) {
				        _this.videoUrl = response.videoUrl
				      } else {
				        _this.$Toast('视频获取失敗1')
				      }
				    // } else {
				    //   _this.$Toast('视频获取失敗2')
				    // }
				  };
				  xhr.onerror = function() {
				    _this.$Toast('视频获取失敗3')
				  };
				  xhr.send(formData);
				
			},
			showLoading(){
				this.Loading()
				console.log('loading')
			},
			onVideoLoaded(){
				this.videoObj = this.$refs.videoPlayer;
				this.videoInfo.durationTime = this.videoObj.durationTime
				uni.hideLoading()
			},
			toFullScreen(){
				this.videoInfo.isfull = true
			},
			exitFullScreen() {
				this.videoInfo.isfull=false
			},
			toPlay(){
				this.videoInfo.ismuted = false
				this.videoInfo.showLoading=true
				this.setShowTime()
				this.videoInfo.ispaused = false
				this.videoObj.$refs.video.muted = false;
				this.videoObj.$refs.video.addEventListener('play', this.onVideoPlay);
				this.videoObj.$refs.video.addEventListener('ended', this.onVideoEnded);
				this.videoObj.$refs.video.addEventListener('pause', this.onVideoPause);
				this.videoObj.$refs.video.addEventListener('timeupdate', this.onVideoTimeUpdate);
				this.videoObj.play()
			},
			toPause(){
				this.videoObj.pause()
				this.videoInfo.ispaused = true
				this.videoObj.$refs.video.muted = tr
				this.videoInfo.ismuted = true
				this.hideBtn = false
			},
			videoload(){
				console.log('loading')
				this.videoInfo.showLoading = true
			},
			changeMuted(){
				this.videoInfo.ismuted = !this.videoInfo.ismuted
				if(this.videoInfo.ismuted){
					this.videoObj.$refs.video.muted = true
				}else{
					this.videoObj.$refs.video.muted = false
				}
			},
			toBackTime(){
				if(this.videoObj.$refs.video.paused){
					this.$Toast("視頻未播放");
					return;
				}
				if(this.videoObj.$refs.video.currentTime <=5){
					this.videoObj.$refs.video.currentTime = 0
					this.videoInfo.curTime = 0
					this.startTime = uni.getStorageSync('startTime')
					
				}else{
					this.videoObj.$refs.video.currentTime -= 5
					this.videoInfo.curTime = parseInt(this.videoObj.$refs.video.currentTime)
					this.startTime = parseInt(uni.getStorageSync('startTime')) +this.videoInfo.curTime
				}
				this.setShowTime()
			},
			setBtnBoxHeight() {
			  const videoElement = this.$refs.videoPlayer.$el;
			  const btnboxElement = this.$el.querySelector('.videobox .btnbox');
			  this.videoHeight = videoElement.clientHeight;
			  // btnboxElement.style.height = this.videoHeight + 'px';
			},
			getCurtime(){
				let date = new Date();
				let year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					days = date.getDay();
				let hours = date.getHours();
				let minutes = date.getMinutes(); 
				let seconds = date.getSeconds(); 
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.curtimestamp = parseInt(date.getTime()/1000)
				this.timePickerEndDefault = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
				this.curtimestamp =  year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
			},
			setShowTime(){
				let date = new Date(this.startTime*1000);
				let year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					days = date.getDay();
				let hours = date.getHours();
				let minutes = date.getMinutes(); 
				let seconds = date.getSeconds(); 
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.playSet.year = year
				this.playSet.month = month
				this.playSet.day = day
				this.timePickerDefault = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
				this.currentTime =  year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
			},
			setShowEndTime(){
				let date = new Date(this.endTime*1000);
				let year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					days = date.getDay();
				let hours = date.getHours();
				let minutes = date.getMinutes(); 
				let seconds = date.getSeconds(); 
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.timePickerEndDefault = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
			},
			//選擇日期
			openShowDate(){
				this.params.hour =false
				this.params.minute = false
				this.params.second = false
				this.showTime=true
				this.startTitle=""
			},
			openShowStartTime(){
				this.params.hour =true
				this.params.minute = true
				this.params.second = true
				this.showTime=true
				// this.startTitle="開始時間"
			},
			confirmDate(e){
				this.curtimestamp = e.timestamp
				this.playSet.year = e.year
				this.playSet.month =e.month
				this.playSet.day = e.day
				
				this.playSet.startInfo.hour = e.hour
				this.playSet.startInfo.minute = e.minute
				this.playSet.startInfo.second = e.second
				this.playSet.startInfo.timestamp = e.timestamp
				this.timePickerDefault = e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute+":"+e.second
				this.showEndTime = true
			},
			confirmEndDate(e){
				let data = {
					app:this.app,
					stream:this.stream,
					startTime:this.startTime,
					endTime:e.timestamp
				}
				this.toPage('Playbacklist',data)
			},
			openShowSpeed(){
				this.showSpeedList = true
			},
			confirmSpeed(e){
				this.videoInfo.speed = this.speedList[e]
				this.speedDefaultIndex = e
				this.videoObj.$refs.video.playbackRate = this.videoInfo.speed;
				// console.log(this.videoInfo.speed)
			},
			
			onVideoTimeUpdate(){
				let play_curtime = this.videoObj.$refs.video.currentTime;
				// console.log('当前时间:', play_curtime,this.videoInfo.durationTime,(this.videoObj.$refs.video.currentTime/this.videoInfo.durationTime));
				// console.log('播放状态:', this.videoObj.$refs.video.paused ? '暂停' : '播放中');
				
				this.videoInfo.curPercent = parseInt((play_curtime/this.videoInfo.durationTime)*100)
				if(this.videoInfo.curTime < parseInt(play_curtime)){
					this.videoInfo.curTime = parseInt(play_curtime)
					this.startTime += 1
				}
				this.setShowTime()
			},
			onVideoPlay(){
				// console.log('开始播放');
				// uni.hideLoading()
				this.videoInfo.showLoading=false
				this.videoObj.$refs.video.playbackRate = this.speedList[this.speedDefaultIndex];
				setTimeout(()=>{
					this.hideBtn = true
				},1200)
				
			},
			onVideoEnded(){
				// this.$Toast("該設備已離線")
				// this.startTime = uni.getStorageSync("startTime")
				this.videoInfo.curTime = 0
				this.videoInfo.ispaused = true
				// uni.hideLoading()
			},
			onVideoPause(){
				// this.$Loading()
				// console.log('暂停');
			},
			openAuthor(){
				this.videoInfo.ispaused = this.videoObj.$refs.video.paused
				this.isaction = !this.isaction
			},
			sliderStart(){
				this.videoObj.pause()
			},
			sliderEnd(){
				let play_curTime = this.videoInfo.durationTime*(this.videoInfo.curPercent/100)
				this.startTime = parseInt(uni.getStorageSync('startTime')) + parseInt(play_curTime)
				this.videoInfo.curTime = parseInt(play_curTime)
				this.setShowTime()
				this.videoObj.$refs.video.currentTime = play_curTime
				// console.log('ispaused',this.videoObj.$refs.video.paused)
				if(!this.videoInfo.ispaused){
					this.videoObj.play()
				}
				
			},
			showStatus(){
				// console.log('video status',this.videoObj.$refs.video.paused)
				this.hideBtn = false
				setTimeout(()=>{
					this.hideBtn = true
				},3000)
			},
			screenshot(){
				if(this.videoObj.$refs.video.paused){
					this.$Toast("視頻未播放")
					return;
				}
				let _this = this
				const videoElement = this.videoObj.$refs.video;
				  const canvas = document.createElement('canvas');
				  const context = canvas.getContext('2d');
				  
				  canvas.width = videoElement.videoWidth;
				  canvas.height = videoElement.videoHeight;
					if(canvas.width==0 || canvas.height==0){
						this.$Toast('截圖失敗')
						return
					}
				  context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
					
				
				 //  const image = new Image();
				 //  image.src = canvas.toDataURL('image/png');
				 //  image.onload = () => {
				 //    // 图片加载完成后的逻辑
				 //    console.log('截图成功', image);
					// let img = _this.base64ToBlob(canvas.toDataURL('image/png'))
					
					
				 //  };
				 let img = _this.base64ToBlob(canvas.toDataURL('image/png'))
				 _this.uploadFile(img)
			},
			uploadFile(blob) {
				let _this = this
				_this.$Loading()
				const formData = new FormData();
				formData.append('file', blob, new Date().getTime()+'.png'); // 你可以自定义文件名
				formData.append('uid', uni.getStorageSync('uid'))
				const xhr = new XMLHttpRequest();
				xhr.open('POST', this.action, true);
				xhr.setRequestHeader('token', uni.getStorageSync('userToken'));
				xhr.send(formData);
			
				xhr.onload = function() {
					if (xhr.status === 200) {
						let result = JSON.parse(xhr.responseText)
						if(result.data.code==102){
							_this.$Toast('請重新登錄')
							setTimeout(()=>{
								_this.toPage("Home")
							},1200)
							return;
						}
						let imgUrl = result.data.url
						//將圖片保存到對應的圖集
						_this.saveImg(imgUrl)
					} else {
						_this.$Toast('截圖失敗');
					}
				};
			
				xhr.onerror = function() {
					_this.$Toast('截圖失敗');
				};
			},
			saveImg(img){
				let data = {
					uid:uni.getStorageSync('uid'),
					img,
					caseid:this.caseid,
					did:this.did,
					time: Math.floor(new Date(this.currentTime).getTime() / 1000)
				}
				saveVideoPic(data).then((res)=>{
					this.$Toast('截圖成功');
				}).catch((err)=>{
					this.$Toast('截圖失敗');
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			toPics(){
				this.toPage('Pics',{caseid:this.caseid,did:this.did})
			},
			base64ToBlob(base64) {
			  const arr = base64.split(',');
			  const mime = arr[0].match(/:(.*?);/)[1];
			  const bstr = atob(arr[1]);
			  let n = bstr.length;
			  const u8arr = new Uint8Array(n);
			  while (n--) {
			    u8arr[n] = bstr.charCodeAt(n);
			  }
			  return new Blob([u8arr], { type: mime });
			},
			reload(){
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize){
				const data = {
					page:pageNo,
					pageSize,
					uid:uni.getStorageSync("uid"),
					did:this.curid,
					caseid:this.caseid
					// caseid:30,
					// did:"34020000001110005555",
				}
				if(pageNo==1){
					this.templist = []
				}
				// getCaseUserlist(data).then((res)=>{
				// 	this.curUserident = res.user_auth
				// 	this.templist = this.templist.concat(res.list)
				// 	this.$refs.paging.complete(res.list)
				// }).catch((err)=>{
				// 	this.$Toast(err.msg)
				// })
				
			},
			
			getAuthTxt(n){
				switch(n){
					case 1:
						return '管理層';
						break;
					case 2:
						return '設計師';
						break;
					default:
						return '客戶'
				}
			},
			changeCheckbox(i){
				// console.log(this.userlist[i])
			},
			toUpdateAuth(){
				let selectList = this.templist.filter(item=>item.ischecked==true)
				if(selectList.length==0){
					this.$Toast("請選擇用戶")
					return;
				}
				let select_arr = [];
				selectList.map((item)=>{
					select_arr.push(item['mid'])
				});
				let select_str = select_arr.join(",")
				let data = {
					uid:uni.getStorageSync("uid"),
					did:this.curid,
					caseid:this.caseid,
					uids:select_str
				}
				this.$Loading()
				updateAuth(data).then((res)=>{
					this.$Toast(res.msg)
				}).catch((err)=>{
					this.$Toast(err.msg)
				}).finally(()=>{
					this.isaction = false
					this.reload()
					uni.hideLoading()
				})
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			},
			goBack(){
				// uni.navigateBack(-1)
				this.toPage('Playbacklist')
			}
			
		}
	}
</script>

<style lang="scss">
	@import 'video.js/dist/video-js.css';
	.content{
		min-height: 100vh;
	}
	.main{
		padding-top: 88rpx;
		video{
			width: 100%;
		}
		/deep/ .uni-video-bar,/deep/ .uni-video-cover{
			display: none;
		}
		.searchtimebox{
			background-color: #f2f2f2;
			.time{
				.tag{
					padding: 0 4rpx;
				}
			}
			.btnbox{
				
			}
		}
		.badge-button{
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: #fff;
		}
		.exitfull{
			position: fixed;
			top:20rpx;
			right: 20rpx;
			z-index: 99999;
		}
		#videobox{
			z-index: 4;
			position: relative;
			&.full{
				position: fixed;
				width: 100%;
				height: 100%;
				top:0;
				left:0;
				z-index: 99998;
			}
		}
		.videobox{
			position: relative;
			height: 450rpx;
			&.videofull{
				height: 100vh;
				width: 100vw;
				position: absolute;
				top:0rpx;
				left:0rpx;
			}
			.time{
				position: absolute;
				left: 10rpx;
				top:6rpx;
				color: #ccc;
				z-index: 3;
				font-size: 24rpx;
				mix-blend-mode: difference;
				z-index: 5;
				&.timefull{
					z-index: 99999;
					top:10rpx;
					left:20rpx;
				}
			}
			.btnbox{
				position: absolute;
				width: 100%;
				// height: inherit;
				height: 430rpx;
				left:0;
				top:0;
				// bottom:0;
				.statusbox{
					width: 100%;
					height: 100%;
					.play{
						z-index: 9;
					}
					.paused{
						z-index: 9;
						opacity: 1;
						transition: all 0.3s linear;
						&.hidebtn{
							opacity: 0;
						}
					}
					.loading{
						z-index: 9;
						position: absolute;
						display: none;
						&.show{
							display: block;
						}
					}
				}
				&.btnfull{
					position: fixed;
					width:100vw;
					height:100vh !important;
					z-index: 99999;
				}
				.pausedbox{
					width: 100%;
					height: 100%;
					position: absolute;
					top:0;
					bottom:0;
				}
				.sound{
					position: absolute;
					bottom:20rpx;
					z-index: 9;
					right: 100rpx;
					opacity: 1;
					transition: all 0.3s linear;
					&.hidebtn{
						opacity: 0;
					}
				}
				.screenhot{
					position: absolute;
					bottom:12rpx;
					z-index: 9;
					right: 20rpx;
					opacity: 1;
					transition: all 0.3s linear;
					&.hidebtn{
						opacity: 0;
					}
				}
			}
			.timeline{
				width: 100%;
				height: 4rpx;
				position: absolute;
				bottom: 6rpx;
				z-index: 9;
				.u-progress{
					position: absolute;
					top:0;
					left:0;
				}
			}
		}
		.video-player{
			width: 100%;
			.myvideojs{
				width: 100%;
			}
		}
		.actionbox{
			margin-top: 20rpx;
			.box{
				background-color: #f2f2f2;
				padding: 20rpx;
				border-radius: 4rpx;
				.item{
					display: flex;
					width: 50%;
					justify-content: center;
					align-items: center;
					&:first-child{
						width: 25%;
					}
					&:last-child{
						width: 25%;
					}
					.picbox{
						margin-bottom: 4rpx;
					}
				}
			}
		}
	}
	
</style>
